<template>
	<view class="goods-search">
		<view class="search">
			<u-search placeholder="请输入商品名称" v-model="keyword" @search="search"  @custom="search"></u-search>
		</view>
		<view class="content u-m-t-48">
			<view class="history">
				<view class="top">
					<text class="left">历史搜索</text>
					<view class="right" @click="deleteData">
						<u-icon name="trash" color="#999" @click="deleteData" size="32"></u-icon>清空
					</view>
				</view>
				<view class="info">
					<view class="item" v-for="(item,index) in historyList" :key="index" @click="toSearch(item,index)">
						{{item}}
					</view>
					<view v-if="historyList.length===0" class="nodata">
						暂无数据
					</view>
				</view>
			</view>
			<view class="hot u-m-t-24">
				<view class="top">
					<text class="left">热门搜索</text>
				</view>
				<view class="info">
					<view class="item" v-for="(item,index) in hotList" :key="index" @click="toSearchHot(item.keyword,index)">
						{{item.keyword}}
					</view>
					<view v-if="hotList.length===0" class="nodata">
						暂无数据
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex';
	
	export default{
		props:{},
		data(){
			return {
				keyword:'',
				historyList:[],
				hotList:['口罩','可威','拜糖平','阿莫西林胶囊','金银花露','爆款专区','限时抢购']
			}
		},
		onLoad(options) {
			this.keyword = options.keyword
		},
		onShow() {
			this.historyList = uni.getStorageSync('historyList') || []
			this.searchlog()
		},
		methods:{
			...mapActions(['ActSearchlog']),
			async searchlog(){
				const res = await this.ActSearchlog({
					storeId:uni.getStorageSync('storeId')
				})
				if(res.success){
					this.hotList = res.data
				}
			},
			search(){
				if(!this.keyword){
					this.$u.toast('请输入关键字！')
					return
				}
				if(this.keyword){
					this.historyList.map((item,index)=>{
						if(item === this.keyword){
							this.historyList.splice(index,1)
						}
					})
					this.historyList.unshift(this.keyword)
					uni.setStorageSync('historyList',this.historyList)
				}
				this.$u.route({
					url: 'pages/goods/goodsList',
					params: {
						keyword: this.keyword
					}
				})
			},
			toSearch(item,index){
				this.historyList.splice(index,1)
				this.historyList.unshift(item)
				uni.setStorageSync('historyList',this.historyList)
				this.keyword=item
				this.$u.route({
					url: 'pages/goods/goodsList',
					params: {
						keyword: item
					}
				})
			},
			toSearchHot(hotItem){
				this.historyList.map((item,index)=>{
					if(item === hotItem){
						this.historyList.splice(index,1)
					}
				})
				this.historyList.unshift(hotItem)
				uni.setStorageSync('historyList',this.historyList)
				this.keyword=hotItem
				this.$u.route({
					url: 'pages/goods/goodsList',
					params: {
						keyword: hotItem
					}
				})
			},
			deleteData(){
				this.historyList=[]
				uni.setStorageSync('historyList',this.historyList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-search{
		height: 100%;
		background-color: #fff;
		.search{
			padding: 12rpx 24rpx;
		}
		.content{
			margin: 0 24rpx;
			.top{
				display: flex;
				justify-content: space-between;
				.left{
					font-weight: bold;
					color: $u-main-color;
					font-size: 28rpx;
				}
				.right{
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}
			.info{
				overflow: hidden;
				.item{
					padding: 0 24rpx;
					line-height: 64rpx;
					border-radius: 96rpx;
					background-color: $u-bg-color;
					color: $u-main-color;
					float: left;
					margin: 24rpx 24rpx 0 0;
					font-size: 26rpx;
				}
			}
			.nodata{
				margin-top: 24rpx;
				font-size: 24rpx;
			}
		}
	}
</style>
